:root {
	--main: #303133;
	--theme: #fb6c28;
	--code-background: #e8f3ff;
	--radius-inner: 4px;
	--classA: #dcdfe6;
	--classB: #e4e7ed;
	--classC: #ebeef5;
	--classD: #f2f6fc;
	--classE: #dcdcdc;
	--classF: #333;
	--classG: #dcdcdc;
	--classH: #e9f2ff;
	--classI: #5a3713;
	--classJ: #f9e5fb;
	--classK: #e4e7ed;
	--classL: #666;
	--classM: #2d2e37;
	--quote: #50bfff;
	--code: #409eff;
}
.evan-markdown {
	::v-deep {
		h1::before,
		h2::before,
		h3::before,
		h4::before,
		h5::before,
		h6::before {
			position: relative;
			display: inline-block;
			vertical-align: middle;
			content: '';
			margin-right: 6px;
			background-position: center;
		}
		h1::before {
			position: relative;
			display: inline-block;
			vertical-align: middle;
			content: '¶';
			top: -4px;
			margin-right: 12px;
			font-size: 24px;
			color: var(--theme);
		}
		h2::before {
			top: -2px;
			left: 0;
			width: 20px;
			height: 20px;
			background-size: auto 100%;
			background-image: url();
		}
		h3::before {
			top: -3px;
			left: 0;
			width: 20px;
			height: 20px;
			background-size: auto 100%;
			background-repeat: none;
			background-image: url();
		}
		h4::before {
			top: -2px;
			width: 22px;
			height: 22px;
			color: var(--theme);
			background-size: auto 100%;
			background-image: url();
		}
		h5::before {
			top: -1px;
			left: 0;
			width: 18px;
			height: 18px;
			background-size: 100% 100%;
			background-image: url();
		}
		h6::before {
			top: -1px;
			left: 0;
			width: 16px;
			height: 16px;
			background-size: auto 100%;
			background-image: url();
		}
		blockquote > p {
			margin-bottom: 0 !important;
			margin-top: 0 !important;
			font-size: 0.9em !important;
		}
		code[class='md-code'],
		code:not([class]) {
			display: inline-block;
			font-size: 13px;
			color: #409eff;
			margin: 2px 5px;
			padding: 0 8px;
			white-space: normal;
			text-indent: 0;
			-webkit-user-select: auto;
			-moz-user-select: auto;
			-ms-user-select: auto;
			user-select: auto;
			vertical-align: baseline;
			word-break: break-word;
			background: #e8f3ff;
			border-radius: 4px;
		}
		code[class*='language-'] {
			display: block;
			overflow-x: auto;
			// border-radius: 0 0 8px 8px;
			white-space: pre-wrap;
			word-break: break-all;
			user-select: auto;
			padding: 12px 12px 14px 18px;
			margin-bottom: 16px;
			background: #282c34;
			color: #abb2bf;
			border-radius: 4px;
			text-shadow: 0 1px rgba(0, 0, 0, 0.3);
			font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
			direction: ltr;
			text-align: left;
			white-space: pre;
			word-spacing: normal;
			word-break: normal;
			line-height: 1.5;
			-moz-tab-size: 2;
			-o-tab-size: 2;
			tab-size: 2;
			-webkit-hyphens: none;
			-moz-hyphens: none;
			-ms-hyphens: none;
			hyphens: none;
		}
		table {
			td {
				padding: 8px;
				border-right: 1px solid var(--classE);
				border-bottom: 1px solid var(--classE);
			}
			thead th {
				font-weight: 500;
				background: var(--classC);
			}

			tbody tr {
				transition: background 0.35s;
			}
		}
	}
}
